<template>
  <div class="Pdetail">
    <config-provider :theme-vars="themeVars">
    <nav-bar fixed="true" left-arrow
  @click-left="onClickLeft" >
  <template #right>
    <icon name="share-o" size="18" class="share"/>

    <icon name="ellipsis" size="18" @click="showShare = true"/>
   
  </template>
  </nav-bar>
  <share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
</config-provider>
    <van-image :src="product.imgs" height="40vh"  fit="contain" position="center" width="100vw">
        <template v-slot:error>加载失败</template>
    </van-image>
    <div class="info">
      <div class="img">
    <van-image
  round
  width="3rem"
  height="3rem"
  :src="puser.avatar"
/>
<span>{{puser.nickname}}</span>
</div>
<config-provider :theme-vars="themeVars">
<Button round  icon="plus">关注</Button>
</config-provider>
</div>
<cell-group>
  <cell :title="`￥${product.goodsPrice}`" value="9人想要 | 20人浏览" />
</cell-group>
<p class="describe">{{product.goodsDescribe}}</p>

  </div>
  <action-bar>
  <action-bar-icon icon="cash-o" text="出价" />
  <action-bar-icon icon="chat-o" text="留言" />
  <action-bar-icon icon="star-o" text="收藏"  @click="addData"/>
  <action-bar-button type="danger" text="卖同款" />
  <action-bar-button type="warning" text="我想要"/>
</action-bar>
</template>
<script setup>
import { Image as VanImage,Cell, CellGroup,Button,Icon,ConfigProvider,ActionBar, ActionBarIcon, ActionBarButton,NavBar,ShareSheet,Toast } from 'vant';
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {loadUserInfoByIdAPI,fetchProductAPI,addhistoryAPI} from '../services/shop';
import {stringify} from "qs";
import {loadDetailAPI} from '../services/product';
const product = ref({}); // 数据
const route = useRoute(); // 获取路由中的参数
const router=useRouter()
const puser=ref({});//获取发布商品的用户的信息
const uavatar=ref('');//用户头像
const showShare = ref(false);
const onClickLeft = () => history.back();
const options = [
[
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];
    const onSelect = (option) => {
      Toast('分享成功');
      showShare.value = false;
    };
const themeVars = {
  buttonDefaultColor:"#474242",
  navBarIconColor:"#333"
    };
//获取商品详情
loadDetailAPI({id:route.query.id}).then((res)=>{
  product.value = res.data;
  loadUserInfoByIdAPI({id:product.value.uid}).then((res)=>{
  puser.value=res.data;
})
})
//将商品加到浏览记录
addhistoryAPI(route.query.id).then((res)=>{
  console.log(res.data)
})
//收藏
const addData = async () => {
  const res = await fetchProductAPI(route.query.id);
  console.log(res);
  if(res.code==200){
    Toast.success(res.msg);
  }else if(res.code==1009){
    Toast.fail('该商品已在收藏夹中');
  }else{
    Toast.fail("网络异常，请重试");
  }
  
};

</script>
<style>
 .info{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem;
 }
 .img{
  display: flex;
  justify-content: center;
  align-items: center;
  
 }
 .share{
  margin-right: 2rem;
 }
 .describe{
  padding: 1rem 1rem;
  color: #333;
 }
</style>